<template>
  <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
    <a-form-item ref="name" label="分类名称" name="name">
      <a-input v-model:value="formState.name" placeholder="请填写分类名称" />
    </a-form-item>
    <a-form-item class="submit-item">
      <a-button type="primary" block @click="handleSubmit">确定</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue"
import type { UnwrapRef } from "vue"
import type { Rule } from "ant-design-vue/es/form"

const formRef = ref()
const $emit = defineEmits(["submit"])
const formState: UnwrapRef<any> = reactive({
  name: ""
})
const rules: Record<string, Rule[]> = {
  name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    { min: 1, max: 24, message: "姓名长度为 2至24", trigger: "blur" }
  ]
}

const handleSubmit = () => {
  let values: any = JSON.parse(JSON.stringify(formState))
  formRef.value.validate().then(() => {
    $emit("submit", values)
  })
}

defineExpose({ formState })
</script>
<style lang="scss" scoped>
:deep(.ant-form-item-label label) {
  font-size: 12px;
}
.select {
  width: 160px;
}
:deep(.select .ant-select-selector) {
  font-size: 12px;
}
:deep(.submit-item .ant-row) {
  display: flex;
  justify-content: center;
}
</style>
